<template>
	<view>
		<custom title="青少年模式" fixed="fixed" border="0.5px solid rgba(0,0,0,0.1)">
		</custom>

		<view v-if="teenagemodeif === false">
			<view style="margin: 300rpx 100rpx;line-height: 60rpx;">
				<view class="tg-content">
					青少年模式
				</view>
				<view class="tgcontent_txt">
					为呵护未成年人健康成长，发个信推出青少年模式。该模式下部分功能将受限制使用。
				</view>
			</view>
			<view class="agreement flex flex-x-y">

				<view class="iconfont icon-weixuanzhong" style="font-size: 26rpx;" v-if="value != 1"
					@tap="choose_value(1)">
				</view>
				<view class="iconfont icon-xuanzhong color-all" style="font-size: 26rpx;" v-else @tap="choose_value(0)">
				</view>
				<view class="agreementview flex flex-x-y" style="margin-left: 4rpx;">
					<text @tap="choose_value(value == 1 ? 0 : 1)">已阅读</text>
					<text class="color-all"
						@tap="openLocalUrl('https://app.fagexin.online/youngprivacy.html','青少年模式')">《发个信青少年模式模式功能使用条款》</text>
				</view>

			</view>
			<fixed-bottom>
				<view class="flex flex-x-y" style="padding-bottom: 50rpx;">
					<view class="default-btn" @tap.stop="submit" style="width: 350rpx;">
						开启
					</view>
				</view>
			</fixed-bottom>
		</view>
		<view v-if="teenagemodeif === true">
			<view style="margin: 100rpx 100rpx;line-height: 60rpx;">
				<view class="tg-content">
					青少年模式
				</view>
				<view class="tgcontent_txt">
					为呵护未成年人健康成长，发个信青少年模式,该模式下部分功能将受限制使用
				</view>
			</view>
			<view style="background-color: #fff;">
				<view class="flex flex-wrap">
					<view class="my-item-box" v-for="(item,index) in itemArr" :key="index">
						<view class="my-item-image-box">
							<image :src="item.src"></image>
						</view>
						<view class="my-item-text">{{item.name}}</view>
					</view>
				</view>
			</view>
			<fixed-bottom>
				<view class="flex flex-x-y" style="padding-bottom: 50rpx;">
					<view class="default-btn" @tap.stop="closesubmit" style="width: 350rpx;">
						关闭
					</view>
				</view>
			</fixed-bottom>
		</view>


		<toast ref="toast"></toast>
		<uni-popup style='border: 1px solid #333;background: #fff;padding: 100rpx;width: 100%;
		height: 100%;margin: auto;text-align: center;line-height: 160rpx;background-color: #fff;' ref="popup" type="bottom"
			border-radius="10px 10px 0 0">
			<view style="font-size: 40rpx;font-weight: 900;" v-if="!teenagemodeif">设置独立密码</view>
			<view style="font-size: 40rpx;font-weight: 900;" v-if='teenagemodeif'>输入独立密码</view>
			<view>请使用独立密码管理青少年模式</view>
			<input v-model="pwinput" style="margin-bottom: 100rpx;" type="text" placeholder="请输入4位独立密码" maxlength="4" />
			<view class="flex flex-x-y">
				<view class="default-btn" @tap.stop="submitpopup" style="width: 350rpx;">
					确定
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				pwinput: '',
				value: 0 + '',
				teenagemodeif: false,
				itemArr: [{
						name: '我的收益',
						url: '/pages/course/income',
						src: '../../static/my/money.png',
					},
					{
						name: '邀请好友',
						url: '/pages/user/invite',
						src: '../../static/my/share.png',
					},
					{
						name: '实名认证',
						url: '/pages/user/truename',
						src: '../../static/my/truename.png',
					},
					{
						name: '我的团队',
						url: '/pages/user/team',
						src: '../../static/my/team2.png',
					},
				],
			}
		},
		onLoad() {
			let teenagemodeif = uni.getStorageSync('teenagemodeif')
			if (teenagemodeif) {
				this.teenagemodeif = uni.getStorageSync('teenagemodeif')
			} else {
				this.teenagemodeif = false
			}

		},
		methods: {
			choose_value(val) {
				this.value = val;
			},
			submit() {
				if (this.value != 1) {
					this.showToast('请先阅读并勾选发个信青少年模式模式功能使用条款');
					return;
				}
				this.pwinput = ''
				this.open()

			},
			submitpopup() {
				this.close()
				let setpwinput = uni.getStorageSync('pwinput');
				if (setpwinput) {
					if (this.pwinput == setpwinput) {
						this.$refs.toast.open({
							left: '',
							desc: '操作成功',
							success: () => {
								this.teenagemodeif = false
								uni.setStorageSync('teenagemodeif', this.teenagemodeif);
								uni.removeStorageSync('pwinput');
							}
						});
					} else {
						this.showToast('密码有误');
					}
				} else {
					this.$refs.toast.open({
						left: '',
						desc: '操作成功',
						success: () => {
							this.teenagemodeif = true
							uni.setStorageSync('teenagemodeif', this.teenagemodeif);
							uni.setStorageSync('pwinput', this.pwinput);

							// uni.redirectTo({
							// 	url: '/pages/setting/setting'
							// });
						}
					});
				}
			},
			open() {
				this.$refs.popup.open('top')
			},
			close() {
				this.$refs.popup.close()
			},
			closesubmit() {
				this.pwinput = ''
				this.open()
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: $pageColor;
	}

	.my-item-box {
		margin-top: 46rpx;
		width: 50%;
		display: flex;
		flex-flow: column nowrap;
		margin-bottom: 46rpx;
		justify-content: center;
		align-items: center;

		.my-item-image-box {
			width: 46rpx;
			height: 46rpx;

			image {
				width: 100%;
				height: 100%;
			}
		}

		.my-item-text {
			font-size: 26rpx;
			color: #666666;
			line-height: 28rpx;
			margin-top: 20rpx;
		}

	}



	.tg-content {
		font-size: 50rpx;
		font-weight: 600;
		text-align: center;
		margin-bottom: 30rpx;
	}

	.tgcontent_txt {
		font-size: 30rpx;
		text-align: center;
	}

	.agreement {
		display: flex;
		align-items: center;
		margin-top: 30rpx;


		image {
			width: 26rpx;
			height: 26rpx;
			background: #ffffff;
			margin-right: 8rpx;
		}

		.agreementview {
			font-size: 26rpx;
			font-weight: 400;
			text-align: center;
			color: #888888;
			line-height: 36rpx;

			.color {
				color: #ebd448;
			}
		}

	}
</style>